/**
* 登录
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView, RefreshControl, Button } from "react-native";
import { connect } from 'react-redux';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import { Colors, Dimens, ImageRes, CheckPhone } from '../../utils/Assets';
import { ProgressView } from '../custom/index'
import { Actions } from 'react-native-router-flux';
import { TextInput } from 'react-native-gesture-handler';
import Toast from 'react-native-root-toast';
class LoginView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            hidePassword: true,
            mobile: '',
            password: ''
        }
    }

    componentDidMount() {

    }
    componentWillUnmount() {

    }
    login() {
        if (CheckPhone(this.state.mobile)) {
            Toast.show('请输入正确的手机号', { position: Toast.positions.CENTER })
            return
        }
        if (!this.state.password) {
            Toast.show('请输入密码', { position: Toast.positions.CENTER })
            return
        }
        let params = {
            mobile: this.state.mobile,
            password: this.state.password,
        }
        this.setState({ loading: true })
        this.props.dispatch(create_service(Contract.POST_USER_LOGIN, params)).then(res => {
            this.setState({ loading: false })
            if (res) {
                this.props.dispatch({ type: 'SAVE_USER_INFO', data: { data: res } });
                Actions.replace('root')
            }
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView showsVerticalScrollIndicator={false}>
                    <View style={{ flex: 1, justifyContent: 'center', marginTop: 80 }}>
                        <Image style={{ width: 80, height: 80, alignSelf: 'center' }} source={ImageRes.personal_icon}></Image>
                        <View style={{ backgroundColor: '#F7F7F7', marginHorizontal: 15, paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', marginTop: 50, borderRadius: 5 }}>
                            <Text style={{ fontSize: 16, color: "#333333", alignSelf: 'center', width: 100 }}>手机号码</Text>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.setState({ mobile: text })
                                }}
                                placeholderTextColor={'#999999'}
                                underlineColorAndroid={'transparent'}
                                maxLength={11}
                                keyboardType={'number-pad'}
                                placeholder={'请输入手机号'}
                                value={this.state.mobile && this.state.mobile}
                            />
                        </View>
                        <View style={{ backgroundColor: '#F7F7F7', marginHorizontal: 15, paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', marginTop: 30, borderRadius: 5 }}>
                            <Text style={{ fontSize: 16, color: "#333333", alignSelf: 'center', width: 100 }}>密码</Text>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.setState({ password: text })
                                }}
                                placeholderTextColor={'#999999'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入密码'}
                                secureTextEntry={this.state.hidePassword}
                                value={this.state.password && this.state.password}
                            />
                            <TouchableOpacity style={{ marginLeft: 15, justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                                this.setState({ hidePassword: !this.state.hidePassword })
                            }}>
                                <Image style={{ width: 23, height: 12, alignSelf: 'center' }} source={this.state.hidePassword ? ImageRes.hide_password : ImageRes.show_password}></Image>
                            </TouchableOpacity>
                        </View>
                        <TouchableOpacity style={{ marginTop: 30, backgroundColor: '#378EFB', justifyContent: 'center', marginHorizontal: 15, paddingVertical: 15, borderRadius: 5 }} activeOpacity={0.8} onPress={() => {
                            this.login()
                        }}>
                            <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>登录</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{ marginTop: 50, flexDirection: 'row', justifyContent: 'center' }}>
                        <TouchableOpacity style={{ justifyContent: 'center', paddingVertical: 10 }} activeOpacity={0.8} onPress={() => {
                            Actions.forgotPasswordView({
                                resetSuccess: (value) => {
                                    this.setState({ mobile: value.mobile, password: "" })
                                }
                            })
                        }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center' }}>忘记密码</Text>
                        </TouchableOpacity>
                        <View style={{ marginHorizontal: 60, backgroundColor: '#DDDDDD', height: 20, width: 1, alignSelf: 'center' }}></View>
                        <TouchableOpacity style={{ justifyContent: 'center', paddingVertical: 10 }} activeOpacity={0.8} onPress={() => {
                            Actions.rigisterView({
                                registerSuccess: (value) => {
                                    this.setState({ mobile: value.mobile, password: value.password })
                                }
                            })
                        }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center' }}>注册</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.white_color,
        paddingBottom: Dimens.isIPhoneX ? 15 : 0,
        flex: 1,
        justifyContent: 'space-between'
    }
})
const ExportView = connect()(LoginView);
module.exports.LoginView = ExportView
